<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            function getLeft(e){
                var offset=e.offsetLeft;
                if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
                return offset;
            }
            $(function(){
                    //alert($("pre").length)
                    var canvas = document.getElementById("panel");
                    var context = canvas.getContext("2d");
                    context.save()
                    context.font="12px impact";
                    context.fillStyle="#996600";
                    context.textAlign="center";
                    context.fillText("hello\t world",200, 90, 500)
                    context.strokeText("nihao",200, 100)

            })

        </script>
        <style type="text/css" media="screen">
            #text{
                font-size:12px
            }
            .test>span{
                padding: 10px;
                color:red;
            }
            .test>span:hover{
                border: 2px solid #ddd;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
                background-color: #efefef;
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>
        <div id="text">
            <canvas id="panel" style="border: 1px solid; width:200px; height:200px">
                sorry your browser not support canvas
            </canvas>
        </div>
    </body>
</html>
